<style>
:host {
  --button-hover-color: rgba(var(--google-grey-900-rgb), .1);
  --button-icon-stroke-color: var(--google-grey-700);
  --pi: 3.14159265358979;
  --spinner-color-rgb: var(--google-blue-600-rgb);
  --text-width: 140px;
  --warn-text-width: 241px;
  --warn-keep-text-width: 318px;
  --separator-color: rgba(0, 0, 0, .1);
  --transparent-button-color: rgba(0, 0, 0, 0);
}

@media (prefers-color-scheme: dark) {
  :host {
    --button-hover-color: rgba(255, 255, 255, .1);
    --separator-color: rgba(255, 255, 255, .1);
    --spinner-color-rgb: 255, 255, 255;
  }
}

.download-item {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
  padding: 6px 0 6px 8px;
  position: relative;
  user-select: none;
}

.progress {
  --width: 26px;
  --radius: calc(var(--width) / 2);
  --stroke-width: 1.2px;

  --download-progress: 0;
  --indicator-color: var(--spinner-color-rgb);

  align-items: center;
  display: flex;
  flex: 0 0 var(--width);
  height: var(--width);
  justify-content: center;
  position: relative;
  width: var(--width);
}

.progress-indicator {
  height: 100%;
  position: absolute;
  width: 100%;
}

.progress-circle,
.progress-spinner {
  cx: var(--radius);
  cy: var(--radius);
}

.progress-circle {
  fill: rgba(var(--indicator-color), 0.2);
  r: calc(var(--radius) - var(--stroke-width) / 2.0);
}

.progress-spinner {
  --stroke-radius: calc(var(--radius) - var(--stroke-width) / 2.0);
  --stroke-circumference: calc(var(--pi) * 2 * var(--stroke-radius));
  --stroke-dash-size: calc(var(--stroke-circumference)
      * var(--download-progress));

  fill: none;
  r: var(--stroke-radius);
  stroke: rgb(var(--indicator-color));
  stroke-dasharray: var(--stroke-dash-size), calc(var(--stroke-circumference)
      - var(--stroke-dash-size));
  stroke-dashoffset: calc(var(--stroke-circumference) * 0.25);
  stroke-linecap: round;
  stroke-width: var(--stroke-width);
}

/* Animate opacity from 1 -> 0 -> 1 -> 0 -> 1 -> 0. */
.download-complete-animation {
  animation-duration: 1s;
  animation-iteration-count: 2.5;
  animation-name: spinner-flash;
}

@keyframes spinner-flash {
  0% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 1;}
}

/* Display progress spinner only when state=DownloadState.kInProgress. */
.download-item:not([data-state='2']) .progress-indicator:not(.download-complete-animation) .progress-circle,
.download-item:not([data-state='2']) .progress-indicator:not(.download-complete-animation) .progress-spinner {
  display: none;
}

#text-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  padding-inline-start: 10px;
  width: var(--text-width);
}

#filename,
#status-text {
  overflow: hidden;
  padding-bottom: 2px;
  padding-top: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#status-text {
  font-size: 85%;
}

#dropdown-button {
  background-color: var(--transparent-button-color);
  border: none;
  border-radius: 4px;
  height: 32px;
  margin-inline-end: 4px;
  margin-inline-start: 8px;
  transition: background-color 300ms;
  width: 32px;
  z-index: 2;
}

#dropdown-button:hover {
  background-color: var(--button-hover-color);
}

#shadow-mask {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: background-color 300ms;
  width: 100%;
  z-index: 1;
}

#shadow-mask:hover {
  background-color: var(--button-hover-color)
}

#dropdown-icon {
  fill: transparent;
  stroke: var(--button-icon-stroke-color);
  stroke-width: 1.2;
  z-index: 2;
}

#icon {
  display: flex;
  z-index: 1;
}

#file-icon {
  height: 16px;
}

#error-icon {
  display: none;
  fill: var(--google-red-600);
  height: 26px;
  width: 26px;
}

#separator {
  background-color: var(--separator-color);
  height: 90%;
  margin-inline-start: 4px;
  width: 1px;
}

#warning-text {
  display: none;
  line-height: 150%;
}

#keep-button {
  display: none;
  margin-inline-start: 4px;
  z-index: 2;
}

#discard-button {
  display: none;
  margin-inline-start: 4px;
  z-index: 2;
}

[data-display-mode='warn'] #text-container {
  width: var(--warn-text-width);
}

[data-display-mode='warn-keep'] #text-container {
  width: var(--warn-keep-text-width);
}

[data-display-mode^='warn'] .progress {
  padding: 0 0 0 3px;
}

[data-display-mode^='warn'] #discard-button,
[data-display-mode^='warn'] #error-icon,
[data-display-mode^='warn'] #warning-text {
  display: block;
}

[data-display-mode^='warn'] #shadow-mask,
[data-display-mode^='warn'] #file-icon,
[data-display-mode^='warn'] #filename,
[data-display-mode^='warn'] #status-text,
[data-display-mode^='warn'] .progress-indicator {
  display: none;
}

[data-display-mode='warn-keep'] #keep-button {
  display: block;
}

[data-display-mode='warn-keep'] #dropdown-button {
  display: none;
}

</style>
<div class="download-item">
  <div id="shadow-mask"></div>
  <div class="progress">
    <svg class="progress-indicator">
      <circle class="progress-circle"></circle>
      <circle class="progress-spinner"></circle>
    </svg>
    <div id="icon">
      <img id="file-icon">
      <svg id='error-icon' viewBox="0 0 26 26">
        <g>
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z">
          </path>
        </g>
      </svg>
    </div>
  </div>
  <div id="text-container">
    <div id="filename"></div>
    <div id="status-text"></div>
    <div id="warning-text"></div>
  </div>
  <cr-button id="keep-button">
    <!-- Text depends on file type so fill it in programmatically. -->
  </cr-button>
  <cr-button id="discard-button"></cr-button>
  <button id="dropdown-button">
    <svg id="dropdown-icon" viewBox="0 0 16 16">
      <g>
        <path d="M 4 10 l 4 -4 l 4 4">
        </path>
      </g>
    </svg>
  </button>
  <div id="separator"></div>
</div>
